<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin: 0;padding: 0;list-style:none;}
	.banner{
		width: 1000px;height: 345px;position: relative;
		margin: 50px;overflow: hidden;
	}
	.banner .img{
		width: 7000px;position: absolute;
	}
	.banner .img li{float: left;}
	.banner .img li img{width: 1000px;}
	.num{position: absolute;width: 100%;bottom:10px;
		left:0px;text-align:center}
	.num li{
	width: 10px;height: 10px;border-radius:50%;
	background: #333;
	margin: 0 3px;display:inline-block;
	}
	.num .on{background: #f39;}
	.banner .btn{
		width: 30px;height: 50px;
		position: absolute;top:50%;
		background: rgba(0,0,0,0.5);
		text-align:center;
		line-height:50px;color:#fff;
		font-size:40px;font-family:'宋体';
		cursor:pointer;margin-top: -25px;
	}
	.btn_l{left:0px;}
	.btn_r{right:0px;}
	</style>
</head>
<body>
	<div class="banner">
		<ul class="img">
			<li><a href=""><img src="./bannerImg/001.jpg" width="100%"></a></li>
			<li><a href=""><img src="./bannerImg/002.jpg" width="100%"></a></li>
			<li><a href=""><img src="./bannerImg/003.jpg" width="100%"></a></li>
			<li><a href=""><img src="./bannerImg/004.jpg" width="100%"></a></li>
			<li><a href=""><img src="./bannerImg/005.jpg" width="100%"></a></li>
			<li><a href=""><img src="./bannerImg/006.jpg" width="100%"></a></li>
		</ul>
		<ul class="num">
			<li class="on"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="btn btn_l">&lt;</div>
		<div class="btn btn_r">&gt;</div>
	</div>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	var i = 0;

	var cloneImg = $('.banner .img li:first').clone();
	
	$('.banner .img').append(cloneImg);

	var len = $('.img li').length;

	$('.banner .btn_r').click(function(){
		moveR();
	})
	$('.banner .btn_l').click(function(){
		moveL();

	})
	var inte = setInterval(moveR,3000);

	$('.banner').hover(function(){
		clearInterval(inte);
	},function(){
		inte = setInterval(moveR,3000);

	})
	$('.banner .num li ').click(function(){
		i = $(this).index();
		var newLeft = i*1000;

		$('.banner .img').animate({left:-newLeft+'px'},1000);

		$('.banner .num li ').eq(i).addClass('on').siblings().removeClass('on');
	})

	function moveR()
	{
		i++;
		if(i == len){
			$('.banner .img').css({left:'0px'});

			i=1;

		}
		var newLeft = i*1000;
		$('.banner .img').animate({left:-newLeft+'px'});

		if(i == len-1){
			$('.banner .num li ').eq(0).addClass('on').siblings().removeClass('on');

		}else{
			$('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
			
		}
	}
	function moveL()
	{
		i--;
		if(i == -1)
		{
			$('.banner .img').css({left:-(len-1)*1000+'px'});
			i = len-2;

		}
		var newLeft = i*1000;

		$('.banner .img').animate({left:-newLeft+'px'},1000);

		$('.banner .img li ').eq(i).addClass('on').siblings().removeClass('on');

	}
	</script>
</body>
</html>